<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZooKeeperForm</title>
    <link rel="stylesheet" href="ZookeeperForm.css">
    <script src="modernizr-latest.js"></script>

    <style>
        body {
            font-family: 'Palatino Linotype' serif;
            max-width: 600px;
            padding: 0px 30px;
        }
    </style>
</head>
<body>
    <h2>Date input types: </h2>
    <form action="#">
        <table>
            <tr>
                <td>
                    <label>date-time local:</label>
                </td>
                <td>
                    <input type="datetime-local" name="datetime-local">
                </td>
            </tr>
            
            <tr>
                <td>
                    <label>date:</label>
                </td>
                <td>
                    <input type="date" name="date">
                </td>
            </tr>

            <tr>
                <td>
                    <label>time:</label>
                </td>
                <td>
                    <input type="time" name="time">
                </td>
            </tr>

            <tr>
                <td>
                    <label>month</label>
                </td>
                <td>
                    <input type="month" name="month">
                </td>
            </tr>

            <tr>
                <td>
                    <label>week</label>
                </td>
                <td>
                    <input type="week" name="week">
                </td>
            </tr>
        </table>
        <br><br>
        <input type="submit">
    </form>
</body>
</html>